<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- layui的核心css-->
    <link rel="stylesheet" href="../css/layui.css">
    <!-- layui的核心js-->
    <script src="../layui.js"></script>
</head>
<body>
    <table id="demo"></table>
    <hr>
    <!--1. 方法渲染 -->
    <!-- 准备容器，设置id属性值-->
    <table id="demo2"></table>

    <!-- 2.自动渲染 
    1) 带有 class="layui-table" 的 <table> 标签。
    2) 对标签设置属性 lay-data="" 用于配置一些基础参数
    3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息
    -->
    <!-- <table class="layui-table" lay-data="{height:315, url:'../use.json',
     page:true, id:'test'}" lay-filter="test">
        <thead>
          <tr>
            <th lay-data="{field:'id', width:120, sort: true}">ID</th>
            <th lay-data="{field:'username', width:80}">用户名</th>
            <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
            <th lay-data="{field:'city'}">城市</th>
            <th lay-data="{field:'sign'}">签名</th>
          </tr>
        </thead>
      </table> -->

      <!-- 3.转换静态表格
    
    -->
    <table lay-filter="demo">
        <thead>
          <tr>
            <th lay-data="{field:'username', width:100}">昵称</th>
            <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
            <th lay-data="{field:'sign'}">签名</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td>贤心1</td>
            <td>66</td>
            <td>人生就像是一场修行a</td>
          </tr>
          <tr>
            <td>贤心2</td>
            <td>88</td>
            <td>人生就像是一场修行b</td>
          </tr>
          <tr>
            <td>贤心3</td>
            <td>33</td>
            <td>人生就像是一场修行c</td>
          </tr>
        </tbody>
      </table>

    <script>
        layui.use('table', function(){
        var table = layui.table;
    //   加载数据表格
    // table.render({
    //     elem:'#demo',//用来绑定容器的id属性值
    //     url:"../use.json",//后台数据接口
    //     cols:[[
    //         {field:"id",title:'用户编号',sort:true,width:120},
    //         {field:"username",title:'用户信息',width:100},
    //         {field:"sex",title:'性别',sort:true,width:100},
    //         {field:"city",title:'城市',width:100},
    //         {field:"sign",title:'签名'},
    //     ]]
    // }) 

// 方法渲染
    // table.render({
    //     elem:'#demo2',//用来绑定容器的id属性值
    //     url:"../use.json",//后台数据接口
    //     height: 315 ,//容器高度
    //     page: true ,//开启分页
    //     cols:[[
    //         {field:"id",title:'用户编号',sort:true,width:120},
    //         {field:"username",title:'用户信息',width:100},
    //         {field:"sex",title:'性别',sort:true,width:100},
    //         {field:"city",title:'城市',width:100},
    //         {field:"sign",title:'签名'},
    //     ]]
    // })

//转换静态表格
    table.init('demo', {
    height: 315 //设置高度
    ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
    //支持所有基础参数
    }); 
    

        });
    </script>
</body>
</html>